<template>
  <div class="xtx-infinite-loading" ref="container">
    <!-- 正在加载数据时显示 -->
    <div class="loading" v-if="isLoading">
      <span class="img"></span>
      <span class="text">正在加载...</span>
    </div>
    <!-- 数据全部加载完毕时显示 -->
    <div class="none" v-if="isFinished">
      <span class="text">亲，没有更多了</span>
    </div>
  </div>
</template>

<script>
/**
 * 核心功能: 检测当前组件是否进入到视口区域  如果进入视口区域就通知父组件开始加载下一页数据
 * 解决问题：
 * 1. 如果检测进入视口区域？ - vueuse /  useIntersectionObserver
 * 2. 通知父组件?   父子通信中的子传父  - emit('自定义事件')
 *
 * 3. 额外的判断处理
 *    1. 在数据全都加载完毕的时候 停止监听   父传子
 *    2. 如果本次上拉加载还在请求中 不要重复触发
 */
import { useIntersectionObserver } from '@vueuse/core'
import { ref } from 'vue'
export default {
  name: 'XtxLoad',
  props: {
    isFinished: {
      type: Boolean, // true 加载完毕没有数据了 false就代表有数据
      default: false
    },
    isLoading: {
      type: Boolean,
      default: false // false代表不在请求中可以进行上拉加载逻辑 true 正在请求中停止上拉加载逻辑
    }
  },
  setup (props, { emit }) {
    const container = ref(null)
    useIntersectionObserver(
      container,
      ([{ isIntersecting }], observerElement) => {
      // isIntersecting 布尔值  进入到视口区域就是true 出去就是false
      // 只要进入和出去都会重新执行回调
      // 在这里组件进入到了视口区域 isIntersecting true  -> 发请求

        // 一旦进入到视口一次之后 请求已经发送了一次 就应该立刻停止监听
        if (isIntersecting) {
          // 自己的逻辑
          console.log('进入视口了可以通知父组件')
          // 如果isFinished为false才触发事件
          if (props.isFinished === false && props.isLoading === false) {
            emit('load')
          }
        }
      },
      // 监听的元素刚进入视口区域就立刻触发回调函数
      { threshold: 0 }
    )
    return {
      container
    }
  }
}
</script>
<style scoped lang='less'>
.xtx-infinite-loading {
  .loading {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 200px;
    .img {
      width: 50px;
      height: 50px;
      background: url(../../assets/images/load.gif) no-repeat center / contain;
    }
    .text {
      color: #999;
      font-size: 16px;
    }
  }
  .none {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 200px;
    .text {
      color: #999;
      font-size: 16px;
    }
  }
}
</style>
